<script setup lang="ts">
import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types'
import { computed } from 'vue'

const props = defineProps<{
  edge?: Edge
  color?: string
  offset?: string
}>()

// 默认偏移量
const defaultOffset = '0px'

// 判断是否为垂直方向的拖拽
const isVertical = computed(() => props.edge === 'top' || props.edge === 'bottom')

const style = computed(() => {
  const baseStyle = {
    background: props.color ?? 'rgba(var(--v-theme-on-surface),1)'
  }

  const offset = props.offset ?? defaultOffset

  // 水平方向拖拽指示器（左右）
  if (props.edge === 'left' || props.edge === 'right') {
    return {
      ...baseStyle,
      left: props.edge === 'left' ? offset : '',
      right: props.edge === 'right' ? offset : ''
    }
  }

  // 垂直方向拖拽指示器（上下）
  if (props.edge === 'top' || props.edge === 'bottom') {
    return {
      ...baseStyle,
      top: props.edge === 'top' ? offset : '',
      bottom: props.edge === 'bottom' ? offset : ''
    }
  }

  return baseStyle
})
</script>

<template>
  <div
    class="position-absolute z-9999"
    :class="{ 'drop-indicator-horizontal': !isVertical, 'drop-indicator-vertical': isVertical }"
    :style="style"
  ></div>
</template>

<style scoped>
/* 水平方向拖拽指示器样式（左右边缘） */
.drop-indicator-horizontal {
  width: 2px;
  top: 3px;
  height: calc(100% - 6px);
}

/* 垂直方向拖拽指示器样式（上下边缘） */
.drop-indicator-vertical {
  height: 2px;
  left: 3px;
  width: calc(100% - 6px);
}
</style>
